<template>
  <div>
      <div class="tubiao">
          <img src="47.jpg" alt="">
          <span class="lianmeng">英雄联盟</span>
          <p class="libao">当前有<b>24</b>个礼包未领取</p>
      </div>
      <div class="sousuo">
          <span class="lingqu">领取就角色:</span>
          <span class="yanhuo">superchao烟火|</span>
          <span class="ban">班德尔城电信</span>
          <span id="jiantou" class="iconfont icon-arrow-left"></span>
      </div>
  </div>
</template>

<script>
export default {

}
</script>

<style scoped>
.tubiao{
    width: 100%;
    height: 0.8rem;
    /* background-color: blueviolet; */
    position: relative;
}
.tubiao img{
    width: 20%;
    height: 0.8rem;
    position: absolute;
}
.lianmeng{
    position: absolute;
    width: 40%;
    height: 0.3rem;
    margin-left: 1.2rem;
    color: black;
    font-size: .20rem;
    font-weight: 900;
}
.libao{
    position: absolute;
    font-size: .14rem;
    margin-top: 0.5rem;
    margin-left: 1.2rem;
    font-size: .16rem;
    /* background-color: darkgray; */
}
b{
    color: brown;
}
.sousuo{
    width: 95%;
    margin: 0 auto;
    height: 00.4rem;
    background-color:#f1f1f1;
    border-radius:0.3rem;
    position: relative;
}
.lingqu{
    position: absolute;
    height: 000.4rem;
    line-height: 0.4rem;
    margin-left: 0.1rem;
    font-size: .14rem;
}
.yanhuo{
    position: absolute;
    height: 000.4rem;
    /* line-height: 0.4rem; */
    margin-left: 0.84rem;
    font-size: .14rem;
    margin-top: 00.11rem;
}
.ban{
    position: absolute;
    margin-left: 1.84rem;
    margin-top: 0.11rem;
    font-size: .14rem;

}
#jiantou{
    position: absolute;
    margin-left: 2.8rem;
    margin-top: 0.11rem;

}
</style>